<template>
  <div>
    <el-input
      placeholder="请输入手机号或邮箱"
      v-model="registerForm.identifier"
    ></el-input>

    <!-- 验证码输入框，右侧显示“获取验证码”按钮 -->
    <el-input
      placeholder="请输入验证码"
      v-model="registerForm.code"
    >
      <template #append>
        <el-button
          type="primary"
          @click="getCode"
          class="get-code-button"
        >
          获取验证码
        </el-button>
      </template>

    </el-input>

    <el-input
      placeholder="请设置密码"
      type="password"
      v-model="registerForm.password"
    ></el-input>
<!--    &lt;!&ndash; 输入用户名 &ndash;&gt;-->
<!--    <el-input-->
<!--      placeholder="请输入用户名"-->
<!--      v-model="registerForm.name"-->
<!--    ></el-input>-->

    <el-button
      type="primary"
      @click="register"
      style="margin-top: 10px"
    >
      注册
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerForm: {
        identifier: "", // 手机号或邮箱
        code: "", // 验证码
        password: "", // 设置密码
        name: "", // 设用户名
      },
    };
  },
  methods: {
    /**
     * 判断是否为手机号
     */
    isPhone(input) {
      const phoneRegex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则
      return phoneRegex.test(input);
    },

    /**
     * 判断是否为邮箱
     */
    isEmail(input) {
      const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
      return emailRegex.test(input);
    },

    async getCode() {
      const identifier = this.registerForm.identifier.trim();

      if (this.isPhone(identifier)) {
        // 调用手机号验证码发送接口
        try {
          const response = await fetch(`/api/api/sms/send?phone=${encodeURIComponent(identifier)}`, {
            method: "GET", // 使用 GET 请求
          });

          const result = await response.json();
          if (result.code === "200") {
            alert(`验证码已发送到手机号: ${identifier}`);
          } else {
            alert(`发送验证码失败: ${result.message}`);
          }
        } catch (error) {
          console.error("发送手机号验证码失败:", error);
          alert("发送验证码失败，请稍后重试！");
        }
      } else if (this.isEmail(identifier)) {
        // 调用邮箱验证码发送接口
        try {
          const response = await fetch(`/api/api/email/send?email=${encodeURIComponent(identifier)}`, {
            method: "GET",
          });
          const result = await response.json();
          if (result.code === "200") {
            alert(`验证码已发送到邮箱: ${identifier}`);
          } else {
            alert(`发送验证码失败: ${result.message}`);
          }
        } catch (error) {
          console.error("发送邮箱验证码失败:", error);
          alert("发送验证码失败，请稍后重试！");
        }
      } else {
        alert("请输入有效的手机号或邮箱！");
      }
    },

    async register() {
      const identifier = this.registerForm.identifier.trim(); // 获取用户输入的手机号或邮箱
      const password = this.registerForm.password.trim(); // 获取用户输入的密码
      const code = this.registerForm.code.trim(); // 获取用户输入的验证码


      // 验证输入是否完整
      if (!identifier || !password || !code) {
        alert("请输入完整的注册信息！");
        return;
      }

      // 判断是手机号还是邮箱，并调用对应的接口
      if (this.isPhone(identifier)) {
        try {
          const response = await fetch(
            `/api/register/phone?phone=${identifier}&code=${code}&password=${password}`, // 拼接手机号注册的 URL
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
            }
          );

          const result = await response.json();
          if (result.code === "200") {
            alert(`注册成功，欢迎 ${result.data.name}`);
            localStorage.setItem("token", result.data.token); // 保存 token
            this.$emit("register-success", result.data); // 通知父组件注册成功
          } else {
            alert(`注册失败: ${result.message}`);
          }
        } catch (error) {
          console.error("手机号注册失败:", error);
          alert("注册失败，请稍后重试！");
        }
      } else if (this.isEmail(identifier)) {
        try {
          const response = await fetch(
            `/api/register/email?email=${identifier}&code=${code}&password=${password}`, // 拼接邮箱注册的 URL
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
            }
          );

          const result = await response.json();
          if (result.code === "200") {
            alert(`注册成功，欢迎 ${result.data.name}`);
            localStorage.setItem("token", result.data.token); // 保存 token
            this.$emit("register-success", result.data); // 通知父组件注册成功
          } else {
            alert(`注册失败: ${result.message}`);
          }
        } catch (error) {
          console.error("邮箱注册失败:", error);
          alert("注册失败，请稍后重试！");
        }
      } else {
        alert("请输入有效的手机号或邮箱！");
      }
    },

    isPhone(input) {
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(input);
    },
    isEmail(input) {
      const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
      return emailRegex.test(input);
    },
  },
};
</script>

<style scoped>
.get-code-button {
  padding: 5px 10px;
  font-size: 14px;
}
</style>
